<template>
  <el-dialog
    title="来源部门"
    :visible.sync="dialogVisible"
    custom-class="custom-dialog"
    width="50%"
    :before-close="handleClose"
    @opened="initData"
  >
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="tree-panel">
          <div class="mb-10 pd-10">
            <el-input
              size="small"
              prefix-icon="el-icon-search"
              placeholder="输入关键字进行过滤"
              v-model="filterText"
            />
          </div>
          <div class="tree-content of-auto pd-10" style="height: 400px">
            <div class="line-tree-panel">
              <el-tree
                v-loading="deptTreeLoading"
                ref="tree"
                class="line-tree"
                node-key="id"
                :data="deptTree"
                :default-expanded-keys="expandedKeysDept"
                :props="deptProps"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
              >
                <div slot-scope="{ node }" class="custom-tree-node">
                  <div
                    :title="node.label"
                    style="
                      white-space: normal;
                      word-break: break-all;
                      height: 40px;
                      display: flex;
                      width: 100%;
                      align-items: center;
                    "
                    :style="{
                      'font-size':
                        node.level === 1
                          ? '16px'
                          : node.level === 2
                          ? '16px'
                          : '16px',
                      'font-weight': node.level === 1 ? 'bold' : '',
                    }"
                  >
                    <span
                      v-if="
                        (node.level === 3 || node.level === 4) &&
                        node.childNodes.length === 0
                      "
                      class="ml-10 mr-10 w-5 h-5 radius-50 bg-999"
                    ></span>
                    <span
                      class="tree-icon"
                      :class="
                        node.childNodes.length === 0
                          ? 'level-4'
                          : node.level === 1
                          ? 'level-1'
                          : node.level === 2
                          ? 'level-2'
                          : node.level === 3
                          ? 'level-3'
                          : 'level-4'
                      "
                    />
                    <span style="line-height: 20px">{{ node.label }}</span>
                  </div>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="flex-start-center">
          <el-button size="mini" class="submit-btn" @click="handleSave()"
            >确认</el-button
          >
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { roleDeptTreeselect } from "@/api/system/dept";
import { wfmCaseDistribute2 } from "@/api/wfm/wfm.js";
import { handleList } from "@/api/user.js";
import { list as roleList } from "@/api/role.js";
import { parseTime } from "@/utils/index";
import data from "@/views/pdf/content";
export default {
  name: "DispatchDialog2",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      deptTreeLoading: false,
      deptTree: [],
      userList: [],
      roleList: [],
      deptProps: {
        children: "children",
        label: "label",
      },
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      timeFlag: true, //判断时间的标杆
      categoryCode: null, //权责清单编码
      expandedKeysDept: [],
      // handleSaveDisabled: false, //控制确认按钮是否为禁用状态
      filterText: "",
      usernameId: null,
      dataForm: {
        opinion: "",
        planCompleteTime: "",
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
      },
      dataObj:{},
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {
    this.$bus.$on("categoryCode", (data) => {
      this.categoryCode = data;
    });
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    addDay(dayNumber) {
      var date = new Date();
      var ms = dayNumber * (1000 * 60 * 60 * 24);
      return parseTime(date.getTime() + ms, "{y}-{m}-{d} {h}:{m}:{s}");
    },

    initData() {
      this.dataForm.planCompleteTime = this.addDay(2);
      this.deptTreeLoading = true;
      roleDeptTreeselect(1)
        .then((res) => {
          this.deptTree = res.depts;
          if (res.depts && res.depts.length > 0) {
            this.expandedKeysDept = res.depts.map((item) => item.id);
          }
          this.deptTreeLoading = false;
        })
        .catch(() => {
          this.deptTreeLoading = false;
        });
      roleList()
        .then((res) => {
          let { code, rows, total } = res;
          if (code == 200) {
            this.roleList = rows;
          }
        })
        .catch(() => {});
      // this.getUserList();
    },

    visibleChange(val) {
      if (val) {
        if (this.dataForm.nextDeptId === "") {
          this.$message.warning("请先选择部门");
        }
      }
    },

    handleClose() {
      this.$emit("closeDialog");
      this.clearData();
      this.userList = [];
    },

    handleSave() {
      this.$emit('dataObj',this.dataObj);
      this.$emit("closeDialog");
    },

    clearData() {
      this.dataForm = {
        opinion: "",
        planCompleteTime: parseTime(
          Date.parse(new Date()),
          "{y}-{m}-{d} {h}:{m}:{s}"
        ),
        nextDeptId: null,
        nextDeptName: "",
        nextRoleId: null,
        nextRoleName: "",
        nextUserId: null,
        nextUserName: "",
      };
      this.filterText = null;
      // this.$refs["form"].clearValidate();
    },

    handleNodeClick(data, node) {
      this.dataForm.nextDeptId = data.id;
      this.dataForm.nextDeptName = data.label;
      this.dataForm.nextUserId = null;
      this.userList = [];
      this.dataObj=data
    },
  },
};
</script>

<style lang="scss" scoped>
.nextUserIdUl {
  list-style: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  margin-top: 10px;
  .nextUserIdLi {
    margin-right: 12px;
    line-height: 20px;
    width: 22%;
    margin-bottom: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.paging {
  margin-top: 10px;
}

.flex-start-center{
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
